<template>
	<view class="wrapper">
		<!-- 返回首页 -->
		<uni-bankhome />
		<view>
			<!-- <h4>实名认证（请上传真实的个人信息，上传认证后将无法修改）</h4> -->
			<view>
				<u-form :model="ruleForm" label-width="200rpx" ref="uForm" :rules="rulesUserinfo">
					<u-form-item label="身份证" prop="idCardNumber" required=true>
						<u-input v-model="ruleForm.idCardNumber" disabled placeholder="请点击图标识别身份信息" @click="handleDistinguishCard"/>
						<u-icon slot="right" color="#999999" size="40" name="camera" @click="handleDistinguishCard">
						</u-icon>
					</u-form-item>
					<u-form-item label="姓名" prop="realName" required=true>
						<u-input v-model="ruleForm.realName" disabled placeholder="请识别" />
					</u-form-item>
					<u-form-item label="出生日期" prop="birthDate" required=true>
						<u-input  v-model="ruleForm.birthDate" disabled placeholder="请识别"></u-input>
					</u-form-item>
					<u-form-item label="性别" prop="sex" required=true>
						<u-input  v-model="ruleForm.sex" disabled placeholder="请识别"></u-input>
					</u-form-item>
					<u-form-item label="户籍" prop="address" required=true>
						<u-input  v-model="ruleForm.address" disabled placeholder="请识别"></u-input>
					</u-form-item>
				</u-form>
				<u-button :customStyle="{'background':$lightColor,'color':'#fff' }" @click="submit">提交</u-button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		PostAuthentication
	} from "@/api/members.js";
	import {
		getCertificateIdentification,
	} from "@/api/goods";
	import api from "@/config/api.js";
	import storage from "@/utils/storage.js"
	export default {
		data() {
			return {
				ruleForm: {
					realName: "",
					idCardNumber: "",
					birthDate:'',
					sex:'',
					address:''
				},
				rules: {
					realName: [{
							required: true,
							message: "请输入姓名",
							// 可以单个或者同时写两个触发验证方式
							trigger: ["blur", "change"],
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.chinese(value);
							},
							message: "姓名输入不正确",
							trigger: ["change", "blur"],
						},
					],
					idCardNumber: [{
							required: true,
							message: "请输入身份证",
							trigger: "blur",
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.idCard(value);
							},
							message: "身份证号码不正确",
							trigger: ["change", "blur"],
						},
					],
					address: [{
							required: true,
							message: "请输入户籍地址",
							trigger: ["change", "blur"],
						}
					],
					sex: [{
							required: true,
							message: "请输入性别",
							trigger: ["change", "blur"],
						}
					],
					birthDate: [{
							required: true,
							message: "请输入出生日期",
							trigger: ["change", "blur"],
						}
					],
				},
			};
		},
		methods: {
			// 选择图片
			handleDistinguishCard () {
				let Token = storage.getAccessToken()
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						var tempFilePaths = res.tempFilePaths
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: api.common + '/upload/file',
								fileType: "image",
								filePath: tempFilePaths[i],
								name: 'file',
								ruleForm: {},
								'content-type': 'multipart/form-data',
								header: {
									accessToken: Token,
									'content-type': 'multipart/form-data' // 设置请求的 header
								},
								success: function(res) {
									res = JSON.parse(res.data)
									if (res.code == 200) {
										let imgUrl = res.result
										that.distinguish(imgUrl)
									} else {
										this.toast(res.message)
									}
								}
							})
						}
					}
				})
			},
			// 证件识别
			distinguish(url) {
				uni.showLoading({
					title: "识别中",
				});
				// 开始识别
				getCertificateIdentification({
					url,
				}).then((res) => {
					if (res.data.code === 200) {
						const data = JSON.parse(res.data.result);
						let {
							num,
							name,
							birthDate, 
							sex,
							gender,
							address
						} = data
						this.ruleForm.idCardNumber = num
						this.ruleForm.realName = name
						this.ruleForm.birthDate = birthDate
						this.ruleForm.sex = gender
						this.ruleForm.address = address
						uni.hideLoading();
					} else {
						this.toast(res.data.message)
					}
				}).catch(err => {
					this.toast(err)
				})
			},
			//toast 提示
			toast(txt) {
				uni.showToast({
					title: txt,
					duration: 1500,
					icon: "none",
				});
			},
			submit() {
				this.$refs.uForm.validate((valid) => {
					if (valid) {
						PostAuthentication(this.ruleForm).then((res) => {
							if (res.data.success) {
								storage.setUserInfo(res.data.result)
								uni.showToast({
									title: "实名认证成功!",
									duration: 2000,
									icon: "none",
								});
								setTimeout(() => {
									uni.navigateBack();
								}, 500);
							} else {
								uni.showToast({
									title: res.data.message,
									duration: 2000,
									icon: "none",
								});
							}
						});
					} else {
						uni.showToast({
							title: "请填写有效信息",
							duration: 2000,
							icon: "none",
						});
					}
				});
			},
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
	};
</script>
<style lang="scss" scoped>
	.wrapper {
		padding: 32rpx;
	}

	.tips {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #999;
	}
</style>
